<template>
  <div class="user-big-box">
    <div class="search-box">
      <div class="options-box">
        <div class="option-left">
          <el-button
            type="primary"
            @click="requestData"
          >
            搜索
          </el-button>
          <el-button
            @click="initSearch"
          >
            重置
          </el-button>
          <el-button
            type="primary"
            @click="handleCreate"
          >
            新增
          </el-button>
        </div>
        <div class="option-right">
        </div>
      </div>
      <el-form :model="params">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="名称">
              <el-input v-model="params.name" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table-box">
      <el-table
        row-key="id"
        :data="dataList"
        border
        type="expand"
      >
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="80"
        />
        <el-table-column
          align="center"
          label="名称"
          prop="name"
        />
        <el-table-column
          align="center"
          label="路由"
          prop="path"
        />
        <el-table-column
          align="center"
          label="权限值"
          prop="permission"
        />
        <el-table-column
          align="center"
          label="排序"
          prop="sort"
        />
        <el-table-column
          align="center"
          label="类型"
          prop="type"
        >
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.type === 0">
              菜单
            </el-tag>
            <el-tag type="primary" v-if="scope.row.type === 1">
              按钮
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="状态"
          prop="status"
        >
          <template #default="scope">
            <el-tag type="danger" v-if="scope.row.status === 0">
              禁用
            </el-tag>
            <el-tag type="success" v-else-if="scope.row.status === 1">
              启用
            </el-tag>
            <el-tag type="danger" v-else>
              状态错误
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="创建时间"
          prop="createTime"
        />
        <el-table-column
          align="center"
          label="更新时间"
          prop="updateTime"
        />
        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          width="200px"
        >
          <template #default="scope">
            <div class="options-box">
              <el-popconfirm
                :title="`确定禁用：${scope.row.name} ？`"
                @confirm="updateStatus(scope.row, 0)"
              >
                <template #reference>
                  <el-link
                    v-if="scope.row.status"
                    type="danger"
                  >
                    禁用
                  </el-link>
                </template>
              </el-popconfirm>
              <el-popconfirm
                :title="`确定启用：${scope.row.name} ？`"
                @confirm="updateStatus(scope.row, 1)"
              >
                <template #reference>
                  <el-link
                    v-if="!scope.row.status"
                    type="primary"
                  >
                    禁用
                  </el-link>
                </template>
              </el-popconfirm>
              <el-link
                type="primary"
                @click="handleUpdate(scope.row)"
              >
                编辑
              </el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 引入组件 -->
    <Update
      :row="row"
      :show="showUpdate"
      @update:show="value => showUpdate = value"
      :type="type"
      @handleReturn="handleReturn"
    />
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {listMenu, updateMenu} from "@/service/MenuController";
import {Page} from "@/types/Page";
import { ElMessage } from 'element-plus';
import Update from "./update/index.vue";

interface ParamsType {
  name?: string;
}

const initParams: ParamsType = {
  name: undefined,
};

const params = ref<ParamsType>({
  ...initParams,
});
const dataList = ref<any[]>([]);
const row = ref<any>({});
const showUpdate = ref<boolean>(false);
const type = ref<1 | 2>(1); // 1 新增 2 更新

onMounted(async () => {
  await requestData()
});

const initSearch = () => {
  params.value = {
    ...initParams,
  }
}

const requestData = async () => {
  const res = await listMenu(params.value);
  if (res.code === "000000") {
    const data = res.data;
    dataList.value = data;
  }
}

const updateStatus = async (row: any, status: 0 | 1) => {
  const res = await updateMenu({
    id: row.id,
    status,
  });
  if (res.code === "000000") {
    ElMessage.success("操作成功！");
    await requestData();
  }
}

const handleReturn = () => {
  showUpdate.value = false;
  requestData();
}

const handleUpdate = (record: any) => {
  row.value = record;
  type.value = 2;
  showUpdate.value = true;
}

const handleCreate = () => {
  row.value = {};
  type.value = 1;
  showUpdate.value = true;
}

</script>

<style scoped lang="less">
@import "./index.less";
</style>